<template>
  <view class="xingzuo-wrapper" v-if="isShowMsg == 'Y'">
    <image
      class="my-bg"
      src="https://ai-sbbs.xyz/api/profile/upload/2024/07/01/216ecf4ef90549a1b0d6b8cd648786f9.png"
      mode="scaleToFill"
    />
    <view class="top">
      <tui-list-cell padding="6px 15px" :hover="false" :arrow="true" @click="handerClick(true)">
        <view class="tui-list-cell">
          <view class="left-label" v-if="!searchInfo.value">请选择星座</view>
          <view class="left-label-2" v-else>{{searchInfo.text}}</view>
        </view>
      </tui-list-cell>
      <tui-form-button
        style="margin-left:8px"
        height="30px"
        width="80px"
        background="#c09351"
        @click="handerBtn"
      >测算</tui-form-button>
    </view>
    <view class="bottom">
      <tui-card
        :title="{'text':key}"
        full
        class="tul-card"
        :key="index"
        :image="imgs[key]"
        v-for="(ls,key,index) in imgs"
      >
        <template v-slot:body>
          <view class="tui-default">{{dataInfo['今日运势'][key]}}</view>
        </template>
      </tui-card>
    </view>
    <tui-picker
      :show="showSelect"
      :pickerData="list"
      @hide="handerClick(false)"
      @change="handerConfirm"
    ></tui-picker>

    <tui-toast ref="toast"></tui-toast>
  </view>
</template>

<script>
import { yfgyunshiApi } from "@/apis/qiuqian";
import showPage from '@/utils/showPage'


export default {
  mixins: [showPage],

  data() {
    return {
      showSelect: false,
      list: [
        {
          value: "0",
          text: "白羊座"
        },
        {
          value: 1,
          text: "金牛座"
        },
        {
          value: 2,
          text: "双子座"
        },
        {
          value: 3,
          text: "巨蟹座"
        },

        {
          value: 4,
          text: "狮子座"
        },
        {
          value: 5,
          text: "处女座"
        },
        {
          value: 6,
          text: "天秤座"
        },
        {
          value: 7,
          text: "天蝎座"
        },

        {
          value: 8,
          text: "射手座"
        },
        {
          value: 9,
          text: "魔羯座"
        },
        {
          value: 10,
          text: "水瓶座"
        },
        {
          value: 11,
          text: "双鱼座"
        }
      ],
      searchInfo: {},
      imgs: {
        今明运势: {
          url: "/static/imgs/liuren/yunshi.png",
          width: 40,
          height: 40,
          circle: true
        },
        爱情运势: {
          url: "/static/imgs/liuren/ganqing.png",
          width: 40,
          height: 40,
          circle: true
        },
        事业运势: {
          url: "/static/imgs/liuren/shiye.png",
          width: 40,
          height: 40,
          circle: true
        },
        财富运势: {
          url: "/static/imgs/liuren/caifu.png",
          width: 40,
          height: 40,
          circle: true
        },
        健康运势: {
          url: "/static/imgs/liuren/jiankang.png",
          width: 40,
          height: 40,
          circle: true
        }
      },
      dataInfo: {}
    };
  },
  methods: {
    handerClick(flag) {
      this.showSelect = flag;
    },
    handerConfirm(e) {
      this.searchInfo = {
        value: e.value,
        text: e.text
      };
    },
    async handerBtn() {
      if (this.searchInfo.value) {
        let { code, data } = await yfgyunshiApi({
          type: 0,
          title_yunshi: this.searchInfo.value
        });
        if (code == 1) {
          this.dataInfo = data;
        }
      } else {
        let params = {
          title: "请选择星座"
        };
        return this.$refs.toast && this.$refs.toast.show(params);
      }
    }
  }
};
</script>

<style lang="scss">
.xingzuo-wrapper {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  background: #f5f6f7;
  position: relative;
  // overflow: hidden;
  padding: 12px;
  .my-bg {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
  }
  .top {
    position: relative;
    display: flex;
    align-items: center;
    z-index: 2;

    .left-label {
      color: #888;
    }
  }
  .bottom {
    // flex-grow: 1;
    // padding: 10px 10px 10px 10px;
    margin-top: 20px;
    display: flex;
    flex-direction: column;
    // overflow: auto;
    .tul-card {
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      overflow: auto;
      margin-bottom: 10px;
    }
    .tui-card-header {
      .tui-default {
        padding: 10px 0 10px 10px;
        overflow: auto;
      }
    }
    .tui-default {
      padding: 10px 0 10px 10px;
      overflow: auto;
    }
  }
}
</style>